<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="./js/http.js"></script>
  <link rel="stylesheet" href="./css/comm.css">
  <link rel="stylesheet" href="./css/weather.css">
  <link rel="stylesheet" href="./css/todos.css">
  <link rel="stylesheet" href="./css/search.css">
  <link rel="stylesheet" href="./css/pic.css">
  <link rel="stylesheet" href="./css/setting.css">
</head>
<body>
  <div class="container">
    <!-- 给天气信息添加底层渐变 -->
    <div class="weather_bgcolor"></div>
    <div class="bgimg" id="bgimg"></div>
    <!-- bgblack 背景添加蒙版 -->
    <div class=""></div>
    <!-- 天气模块 -->
    <div id="weat" class="weather">
      <div id="city" class="weat_city"></div>
      <div class="wea_left">
        <div id="weat_img" class="weat_img"></div>
        <div id="tem" class="weat_tem"></div>
      </div>
      <div class="weat_right">
        <div class="wr_td">
          <div id="win" class="weat_win"></div>
        </div>
        <div class="wr_td">
          <div id="temHight" class="tem"></div>
        </div>
        <div class="wr_td">
          <div id="air" class="air"></div>
        </div>
      </div>
    </div>

    <!-- 天气弹出款 -->
    <div id="weat_diong" class="weat_diong">
      <div class="weat_diong_icon"></div>
      <div id="diong_city_revise" class="hd">
        <input type="text" class="search_city">
        <div class="diong_city"></div>
        <div class="revise"></div>
        <div class="clear"></div>
        <div class="diong_img"></div>
        <div class="diong_tem"></div>
      </div>
      <div class="clear"></div>
      <div class="bottom">
      </div>
    </div>


    <!-- 待办事项 -->
    <div class="todo_box">
      <div class="todo_title">
        <strong>待办事项</strong>
      </div>
      <!-- 待办事项弹出框 -->
      <div class="todo_diong">
        <section>
            <ol onselectstart="return false;" id="todolist" class="demo-box">
            </ol>
            <ul onselectstart="return false;" id="donelist">
            </ul>
        </section>
        <header>
            <input type="text" id="title" name="title" placeholder="添加一个新的待办事项" required="required" autocomplete="off" />
        </header>
      </div>
    </div>

    <!-- 标签栏 -->
    <div class="tab_box">
      <!-- 搜索栏 -->
      <div id="search_box" class="search">
        <div class="search_icon"></div>
        <!-- 谷歌的name为q或query才能传参，百度的name必须为wd或word,搜狗的的name可以是word或query -->
        <div id="search_clear">
          <form action="http://www.baidu.com/baidu">  
            <input name="word" class="saerch_in" type="text" autocomplete="off" />
            <div id="search_more_click" class="icon"><div class="more"></div></div> 
            <input value="" class="saerch_sub" type="submit" />  
          </form>      
        </div>
        
        <!-- 下拉菜单 -->
        <div id="search_more" class="doing">
          <ul>
            <li id="search_baidu">
              <img src="./img/baidu.gif" alt="百度"><span>百度</span>
            </li>
            <li id="search_bing">
              <img src="./img/bing.ico" alt="必应"><span>Bing</span>
            </li>
            <li id="search_google">
              <img src="./img/google.ico" alt="谷歌"><span>Google</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 标签 -->
      <div class="tag">
        <div class="tag_hb">
          <!-- <div data-id="1" class="tag_page">
            <a href="https://www.baidu.com/">
              <div class="favicon"></div>
            </a>
          </div> -->
        </div>
      </div>
      


    </div>
    
    <!-- 图片区域 -->
    <div class="pic">
      <div id="nextimg" class="next"><img src="./img/next.png" alt="上一张" title="上一张" /></div>
      <div id="previmg" class="previous"><img src="./img/prev.png" alt="下一张" title="下一张" /></div>
      <div id="intoimg" class="into"><a id="intoLink" href=""><img id="into" src="./img/details.png" alt="详情" title="" /></a></div>
    </div>

    <!-- 页面设置 -->
    <div class="setting">
      <div class="setting_icon"></div>
    </div>
    
  </div>

  
  
  <script src="./js/weather.js"></script>
  <script src="./js/todos.js"></script>
  <script src="./js/search.js"></script>
</body>
</html>